<template>
  <div class="dialog_content">
    <el-dialog class="m_dialog" :title="dialogName" :visible.sync="riskdialogVisible" width="800" append-to-body
      :before-close="cancelDetail" :close-on-click-modal="false">
      <div class="content">
        <custom-form ref="riskForm" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules"
          label-width="120px" label-position="left">
          <!-- <template #riskMarking>
            <el-select v-model="formModel.riskLevelName" placeholder="请选择平面图" @change="selectChange">
              <el-option v-for="item in picList" :key="item.projectPointPicId" :label="item.picName"
                :value="item.projectPointPicId">
              </el-option>
            </el-select>
            <el-button @click="imageAnnotation()" type="primary">标注</el-button>
          </template> -->
        </custom-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDetail" class="btn_cancel">关 闭</el-button>
        <!-- <el-button type="primary" @click="submitFrom()" class="btn_primary">确 定</el-button> -->
      </div>
    </el-dialog>
    <!-- <image-marking :markDialogVisible="markDialogVisible" @cancel="cancel"/> -->
    <el-dialog class="m_dialog" title="标注" :visible.sync="markDialogVisible" width="800" append-to-body
      :close-on-click-modal="false">
      <PlanPosition @coordinates="handleGetCoordinates" :src="src"></PlanPosition>
    </el-dialog>
  </div>
</template>

<script>
import {
  addProjectPointRisk,
  updateProjectPointRisk,
  delProjectPointRisk,
  getProjectPointRisk,
  listProjectPointRisk,
  getProjectPointPicList
} from "@/api";
import imageMarking from "./imageMarking.vue";
import PlanPosition from './PlanPosition.vue'
export default {
  props: ["riskdialogVisible", "riskRowObj"],
  dicts: ["risk_level", "projectpointpic_type"],
  data() {
    return {
      src: '',
      picList: [],
      positionData: [],
      dialogName: "",
      // 行传过来的数据
      rowList: this.riskRowObj,
      // 图片标注
      markDialogVisible: false,
      // 表单字段
      formModel: {
        riskName: undefined,
        riskLevel: undefined,
        riskLevelName: undefined,
        projectPointPicId: undefined,
        projectPointRiskId: undefined,
        riskDes: undefined,
        remark: undefined,
        positions: [],
      },
      //   表单配置
      formItemConfig: [
        {
          label: "风险点名称",
          prop: "riskName",
          span: 24,
          clearable: true,
          disabled:true,
        },
        {
          label: "风险等级",
          prop: "riskLevel",
          span: 24,
          component: "BaseSelect",
          clearable: true,
          disabled:true,
        },
        // {
        //   label: "风险点",
        //   prop: "riskLevelName",
        //   span: 24,
        //   slotName: "riskMarking",
        //   component: "BaseSelect",
        // },
        {
          label: "风险点具体地址",
          prop: "riskDetailAddress",
          span: 24,
          clearable: true,
          disabled:true,
        },
        {
          label: "风险点编码",
          prop: "riskCode",
          span: 24,
          clearable: true,
          disabled:true,
        },
        {
          label: "风险说明",
          prop: "riskDes",
          span: 24,
          clearable: true,
          disabled:true,
        },
        {
          label: "备注",
          prop: "remark",
          span: 24,
          clearable: true,
          disabled:true,
        },
      ],
      // 表单校验
      formRules: {
        riskName: [
          {
            required: true,
            message: "请输入风险点名称",
            trigger: "blur",
          },
        ],
        riskLevel: [
          {
            required: true,
            message: "请选择风险等级",
            trigger: "change",
          },
        ],
        projectPointPicId: [
          {
            required: true,
            message: "请选择风险点",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {
    // riskRowObj: function (val) {
    //   this.rowList = val;
    //   console.log(val,'val watch')
    //   if (this.rowList.projectPointRiskId) {
    //     this.dialogName = "编辑信息";
    //     this.initForm();
    //   } else {
    //     this.formModel = {}
    //     this.dialogName = "新增信息";
    //   }
    // },
  },
  methods: {
    /**
     * 填充风险等级下拉框内容
     */
    setRiskLvSelect() {
      if (this.dict) {
        // 风险等级类型
        this.formItemConfig[this.formItemConfig.findIndex(item => item.prop == 'riskLevel')].options = this.dict.type.risk_level;
      }
    },
    handleGetCoordinates(val) {
      this.positionData = val
    },
    // 关闭弹窗
    cancelDetail() {
      this.$emit("cancelDetail");
    },
    tempFm(id) {
      this.$emit("tempFm", id);
    },
    // 渲染表单
    initForm() {
      // if (this.rowList.projectPointRiskId) {
      //   getProjectPointRisk(this.rowList.projectPointRiskId).then(
      //     (response) => {
      //       this.formModel = response.data;
      //       if(this.formModel.riskLevel == 1){
      //         this.formModel.riskLevelName = "平面图"
      //       }else if(this.formModel.riskLevel == 2){
      //         this.formModel.riskLevelName = "实景图"
      //       }
      //     }
      //   );
      // } else {
      // }
    },
    // 修改表信息
    submitFrom() {
      console.log(this.positionData, '标点定位')
      this.formModel.riskType = this.rowList.riskType
      this.formModel.projectPointId = this.rowList.projectPointId
      this.formModel.projectPointPicId = this.rowList.projectPointPicId | '1813399309081735170'
      if(this.positionData.length > 0){
        this.formModel.positions = [{x: this.positionData.split(',')[0], y: this.positionData.split(',')[1]}]
      }
      console.log(this.formModel, '入参')
      if (this.formModel.projectPointRiskId) {
        updateProjectPointRisk(this.formModel).then((response) => {
          // getProjectPointRisk(this.riskForm.projectPointPicId).then(
          //   (response) => {
          if (response.code == 200) {
            this.$message.success('修改成功')
            this.$emit('cancelDetail', false)
            this.tempFm(this.riskForm.projectPointPicId);
          }
        }
        );
        this.cancel();
        // });
      } else {
        addProjectPointRisk(this.formModel).then((response) => {
          if (response.code == 200) {
            this.$message.success('新增成功')
            this.$emit('cancelDetail', false)
          }
        })
      }
    },
    //选择平面图
    selectChange(id) {
      console.log(id, 'picItem')
      const selectedOption = this.picList.find(item => item.projectPointPicId === id);
      // console.log('Selected option:', selectedOption);
      this.formModel.projectPointPicId = selectedOption.projectPointPicId
      this.src = this.$store.state.config.inFilePrefix + selectedOption.picUrl
    },
    // 标注弹窗
    imageAnnotation() {
      this.markDialogVisible = true;
    },
    cancel() {
      this.markDialogVisible = false;
    },
    //获取平面图列表
    getPicList() {
      getProjectPointPicList({ picType: 1, projectPointId: this.rowList.projectPointId }).then(res => {
        this.picList = res.rows
        console.log(res, 'pic list')
      })
    },
  },
  created() {
    this.setRiskLvSelect()
    this.getPicList()
    console.log(this.rowList, 'rowLis2t')
    if (this.rowList.projectPointRiskId) {
      this.formModel = this.rowList
      this.dialogName = "编辑信息";
      // this.initForm();
    } else {
      this.formModel = {}
      this.dialogName = "新增信息";
    }
  },
  mounted() { },
  components: {
    imageMarking,
    PlanPosition,
  },
};
</script>

<style lang="less" scoped>
// /deep/ .content .el-select{
//     width: 100%;
// }
</style>
